import React, {Component,} from 'react'
import {connect,} from 'react-redux'

import {PullToRefresh,} from "antd-mobile"
import ReactDOM from "react-dom";

class PullToRefreshGameList extends Component {

    constructor(props) {
        super(props)

        this.state = {
            // refreshing: false,
            down: true,
            height: document.documentElement.clientHeight - 81.5 - 50,
        }
    }

    componentDidMount() {
        const ptrDom = ReactDOM.findDOMNode(this.ptr)
        ptrDom.addEventListener('scroll', (e) => {
            const diff = ptrDom.scrollHeight - ptrDom.scrollTop
            const hei = ptrDom.clientHeight
            const curTab = this.props.curTab
            const today = this.props.game.today
            const games = this.props.game.games
            const live = games[today].live
            const early = games[today].early
            const lastEvaluatedKeyLive = live.lastEvaluatedKey
            const lastEvaluatedKeyEarly = early.lastEvaluatedKey
            if (diff === hei) {
                switch (curTab) {
                    case '全部':
                        break
                    case '进行中':
                        this.props.doFetchGameList({
                            date: today,
                            exclusiveStartKey: lastEvaluatedKeyLive,
                            status: 'live',
                        })
                        break
                    case '赛程':
                        this.props.doFetchGameList({
                            date: today,
                            exclusiveStartKey: lastEvaluatedKeyEarly,
                            status: 'early',
                        })
                        break
                    case '赛果':
                        this.props.doFetchGameList({
                            date: today,
                            exclusiveStartKey: lastEvaluatedKeyLive,
                            status: 'live',
                        })
                        break
                    case '关注':
                        break
                    default: break
                }
            }
        })
    }


    onRefresh = async () => {
        this.setState({ refreshing: true })
        const pullFinished = await this.props.onRefresh()
        if (pullFinished) {
            this.setState({ refreshing: false })
        }
    }

    render() {

        return (
            <PullToRefresh
                damping={60}
                distanceToRefresh={50}
                ref={el => this.ptr = el}
                style={{
                    height: this.state.height,
                    overflow: 'auto',
                }}
                refreshing={this.props.refreshing}
                onRefresh={this.onRefresh}
                // onScroll={() => console.log('scroll in ptr')}
            >
                {this.props.children}
            </PullToRefresh>
        )
    }
}

const mapState = state => ({
    game: state.game,
})

const mapDispatch = dispatch => ({
    doFetchGameList: (payload) => dispatch.game.doFetchGameList(payload),
})

export default connect(mapState, mapDispatch)(PullToRefreshGameList)
